<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <title>笔记</title>
    <link rel="stylesheet" href="css/bootstrap.min.css" />
    <style>
        body{
            margin: 10px;
            background-color: #f5f5f5;
        }
        .card{
            margin-bottom: 10px;
        }
    </style>
    <script src="js/jquery-3.5.0.min.js"></script>
    <script src="js/bootstrap.bundle.min.js"></script>
    <script>
        $(function () {

            $.ajax({
                url:'/note/list',//请求的url
                type:'GET', //请求方式，GET或POST
                data:{ //发送服务器的数据
                },
                dataType:'json',  //返回的数据格式：json/xml/html/script/jsonp/text
                success:function(data,textStatus,jqXHR){ //statusCode是2xx 或 304时，执行该函数
                    if(data.code == 0){
                        for(let item in data.data){
                            let temp = `
                                <div class="card" >
                                <div class="card-body">
                                    <h5 class="card-title">${item.title}</h5>
                                    <p class="card-text">${item.content}</p>

                                </div>
                            </div>
                            `
                            $("body").append(temp)
                        }
                    }else{
                        let temp = `
                            <div class="alert alert-danger" role="alert">
                                ${data.msg}
                                <button type="button" class="close" data-dismiss="alert" aria-label="Close">
                                    <span aria-hidden="true">&times;</span>
                                </button>
                            </div>`
                        $("body").append(temp)
                    }
                },
                error:function(xhr,textStatus){ //statusCode是 2xx 或 304 以外的值时，执行该函数
                    console.log('错误')
                    console.log(xhr)
                    console.log(textStatus)
                }
            })

        })

    </script>
</head>
<body>

</body>
</html>